<template>
  <div class="my-charts">
    <div class="my-echart" :option="option" autoresize ref="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mixins: [],
  components: {
    // VChart,
  },
  provide: {
    // [THEME_KEY]: 'dark',
  },
  props: {
    option: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    option: {
      immediate: true,
      deep: true,
      handler() {
        this.chartOption = { ...this.option };
        this.setOption(this.chartOption);
      },
    },
  },
  data() {
    return {
      myChart: null,
      chartOption: {},
    };
  },
  methods: {
    setOption(option = {}) {
      if (this.myChart) {
        this.myChart.setOption(option);
      }
    },
    resize() {
      this.$nextTick(() => {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
    },
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.chart);
    window.addEventListener("resize", () => {
      this.resize();
    });
    this.setOption(this.chartOption);
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.my-charts {
  width: 100%;
  height: 100%;
}
.my-echart {
  width: 100%;
  height: 100%;
}
</style>
